$odoo-status-bar-item: (
    'border-radius': 0.1rem,
    'caret-width': 1em,
    'background': #{getCssVar('color', 'tertiary', 'light', 'hover')},
    'border-color': #{getCssVar('color', 'bg', 1)},
    'border-color-active': #{getCssVar(color, primary)},
    'background-hover': #{getCssVar('color', 'tertiary', 'light', 'active')},
    'border-width': 1px, 
    'padding-x':calc(#{getCssVar('odoo-status-bar-item', caret-width)} * 1.25),
    'padding-y': calc(0.3125rem + #{getCssVar('odoo-status-bar-item',border-width)}),
    'point-top-left': 0 0,
    'point-top-right': calc(100% - #{getCssVar('odoo-status-bar-item', caret-width)}) 0,
    'point-middle-left':#{getCssVar('odoo-status-bar-item', caret-width)} 50%,
    'point-middle-right':100% 50%,
    'point-bottom-left':0 100%,
    'point-bottom-right':calc(100% - #{getCssVar('odoo-status-bar-item', caret-width)}) 100%,
    'point-inner-top-left':calc(#{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) 0,
    'point-inner-top-right':calc(100% - #{getCssVar('odoo-status-bar-item', caret-width)} - #{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) 0,
    'point-inner-middle-left':calc(#{getCssVar('odoo-status-bar-item', caret-width)} + #{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) 50%,
    'point-inner-middle-right':calc(100% - #{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) 50%,
    'point-inner-bottom-left':calc(#{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) 100%,
    'point-inner-bottom-right':calc(100% - #{getCssVar('odoo-status-bar-item', caret-width)} - #{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) 100%,
);

@include b(odoo-status-bar) {
    @include set-component-css-var('odoo-status-bar-item', $odoo-status-bar-item);

    display: flex;
    align-items: center;
    height: 100%;
    font-family: sans-serif;

    @include e('item') {
        @include flex-center;

        position: relative;
        height: 100%;
        min-height: #{getCssVar('height-control', 'default')};
        padding: #{getCssVar('odoo-status-bar-item',padding-y)} calc(#{getCssVar('odoo-status-bar-item',padding-x)} * 1.375);
        margin-left: calc(-1 * #{getCssVar('odoo-status-bar-item', caret-width)} - #{getCssVar('odoo-status-bar-item',border-width)} * sqrt(3));
        clip-path: polygon(#{getCssVar('odoo-status-bar-item',point-top-left)}, #{getCssVar('odoo-status-bar-item',point-top-right)}, #{getCssVar('odoo-status-bar-item',point-middle-right)}, #{getCssVar('odoo-status-bar-item',point-bottom-right)}, #{getCssVar('odoo-status-bar-item',point-bottom-left)}, #{getCssVar('odoo-status-bar-item',point-middle-left)});
        color: getCssVar('color', 'text', 0);
        white-space: nowrap;
        cursor: pointer;
        background: #{getCssVar('odoo-status-bar-item','background')};
        border: 0;

        &:disabled {
            color: getCssVar(color, disabled, text);
        }

        &:focus {
            background: #{getCssVar('odoo-status-bar-item','background')};
        }

        &::before {
            position: absolute;
            inset: 0; 
            clip-path: polygon(#{getCssVar('odoo-status-bar-item',point-top-left)}, #{getCssVar('odoo-status-bar-item',point-top-right)}, #{getCssVar('odoo-status-bar-item',point-middle-right)}, #{getCssVar('odoo-status-bar-item',point-bottom-right)}, #{getCssVar('odoo-status-bar-item',point-bottom-left)}, #{getCssVar('odoo-status-bar-item',point-middle-left)}, #{getCssVar('odoo-status-bar-item',point-top-left)}, #{getCssVar('odoo-status-bar-item',point-inner-top-left)}, #{getCssVar('odoo-status-bar-item',point-inner-middle-left)},#{getCssVar('odoo-status-bar-item',point-inner-bottom-left)},#{getCssVar('odoo-status-bar-item',point-inner-bottom-right)},#{getCssVar('odoo-status-bar-item',point-inner-middle-right)},#{getCssVar('odoo-status-bar-item',point-inner-top-right)}, #{getCssVar('odoo-status-bar-item',point-inner-top-left)});
            content: "";
            background-color: #{getCssVar('odoo-status-bar-item',border-color)};
        }

        &:first-child {
            #{getCssVarName('odoo-status-bar-item', point-middle-left)}: 0 50%;
            padding-left: #{getCssVar('odoo-status-bar-item',padding-x)};
            margin-left: 0;
            border-top-left-radius: #{getCssVar('odoo-status-bar-item',border-radius)};
            border-bottom-left-radius: #{getCssVar('odoo-status-bar-item',border-radius)};

            &::before {
                #{getCssVarName('odoo-status-bar-item', point-inner-top-left)}: #{getCssVar('odoo-status-bar-item',point-top-left)};
                #{getCssVarName('odoo-status-bar-item', point-inner-middle-left)}: #{getCssVar('odoo-status-bar-item',point-middle-left)};
                #{getCssVarName('odoo-status-bar-item', point-inner-bottom-left)}: #{getCssVar('odoo-status-bar-item',point-bottom-left)};
                border-top-left-radius: #{getCssVar('odoo-status-bar-item',border-radius)};
                border-bottom-left-radius: #{getCssVar('odoo-status-bar-item',border-radius)};
            }
        }

        &:last-child {
            #{getCssVarName('odoo-status-bar-item', point-top-right)}: 100% 0;
            #{getCssVarName('odoo-status-bar-item', point-bottom-right)}: 100% 100%;
            padding-right: #{getCssVar('odoo-status-bar-item',padding-x)};
            border-top-right-radius: #{getCssVar('odoo-status-bar-item',border-radius)};
            border-bottom-right-radius: #{getCssVar('odoo-status-bar-item',border-radius)};

            &::before {
                #{getCssVarName('odoo-status-bar-item', point-inner-top-right)}: #{getCssVar('odoo-status-bar-item',point-top-right)};
                #{getCssVarName('odoo-status-bar-item', point-inner-middle-right)}: #{getCssVar('odoo-status-bar-item',point-middle-right)};
                #{getCssVarName('odoo-status-bar-item', point-inner-bottom-right)}: #{getCssVar('odoo-status-bar-item',point-bottom-right)};
                border-top-right-radius: #{getCssVar('odoo-status-bar-item',border-radius)};
                border-bottom-right-radius: #{getCssVar('odoo-status-bar-item',border-radius)};
            }
        }
        

        &:hover:not(:disabled, .is-current) {
            background: #{getCssVar('odoo-status-bar-item',background-hover)};
        }

        @include m('time') {
            margin-top: calc((14px - 10px) / 2);
            margin-left: 4px;
            font-size: 10px;
            color: var(--ibiz-color-text-3);
        }

        @include when('current') {
            z-index: 1;
            background-color: transparent;

            &::after {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                content: '';
                background-color: getCssVar('odoo-status-bar-item',border-color-active);
                opacity: 0.2;
            }

            &::before {
                #{getCssVarName('odoo-status-bar-item', point-inner-top-left)}: calc(#{getCssVar('odoo-status-bar-item',border-width)} * sqrt(3)) #{getCssVar('odoo-status-bar-item',border-width)};
                #{getCssVarName('odoo-status-bar-item', point-inner-top-right)}: calc(100% - #{getCssVar('odoo-status-bar-item', caret-width)} - #{getCssVar('odoo-status-bar-item',border-width)} / sqrt(2)) #{getCssVar('odoo-status-bar-item',border-width)};
                #{getCssVarName('odoo-status-bar-item', point-inner-bottom-left)}: calc(#{getCssVar('odoo-status-bar-item',border-width)} * sqrt(3)) calc(100% - #{getCssVar('odoo-status-bar-item',border-width)});
                #{getCssVarName('odoo-status-bar-item', point-inner-bottom-right)}: calc(100% - #{getCssVar('odoo-status-bar-item', caret-width)} - #{getCssVar('odoo-status-bar-item',border-width)} / sqrt(2)) calc(100% - #{getCssVar('odoo-status-bar-item',border-width)});
                background-color: #{getCssVar('odoo-status-bar-item',border-color-active)};
            }

            &:first-child::before {
                #{getCssVarName('odoo-status-bar-item', point-inner-top-left)}: calc(#{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) #{getCssVar('odoo-status-bar-item',border-width)};
                #{getCssVarName('odoo-status-bar-item', point-inner-middle-left)}: calc(#{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) 50%;
                #{getCssVarName('odoo-status-bar-item', point-inner-bottom-left)}: calc(#{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) calc(100% - #{getCssVar('odoo-status-bar-item',border-width)});
            }

            &:last-child::before {
                #{getCssVarName('odoo-status-bar-item', point-inner-top-right)}: calc(100% - #{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) #{getCssVar('odoo-status-bar-item',border-width)};
                #{getCssVarName('odoo-status-bar-item', point-inner-middle-right)}: calc(100% - #{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) 50%;
                #{getCssVarName('odoo-status-bar-item', point-inner-bottom-right)}: calc(100% - #{getCssVar('odoo-status-bar-item',border-width)} * sqrt(2)) calc(100% - #{getCssVar('odoo-status-bar-item',border-width)});
            }
        }

        @include when('popover-visible') {
            &:not(.is-current) {
                background: #{getCssVar('odoo-status-bar-item',background-hover)};
            }
        }
    }

    @include e('popover') {
        @include m('content') {
            display: flex;
            flex-direction: column;

            .#{bem('odoo-status-bar__item')} {
                justify-content: flex-start;
                padding: 0 getCssVar('spacing', 'base-tight');

                &:hover:not(:disabled) {
                    background-color: getCssVar('color', 'bg', 0);
                }

                &::before {
                    display: none;
                }
            }
        }

        &.el-popper {
            padding: getCssVar('spacing', 'super-tight') 0;
        }
    }
}
